<template>
  <view class="container">
    <!-- 购物车列表 -->
    <view class="cart-list">
      <!-- 按商家分组 -->
      <view v-for="(shop, shopIndex) in cartList" :key="shopIndex" class="shop-group">
        <!-- 商家信息 -->
        <view class="shop-header">
          <!-- 商家选择框 -->
          <view class="checkbox" @click="toggleShopSelect(shopIndex)">
            <view v-if="shop.selected" class="checkbox-icon">✔</view>
          </view>
          <text class="shop-name">{{ shop.name }}</text>
        </view>
        <!-- 商品列表 -->
        <view v-for="(item, itemIndex) in shop.items" :key="itemIndex" class="cart-item">
          <!-- 商品选择框 -->
          <view class="checkbox" @click="toggleItemSelect(shopIndex, itemIndex)">
            <view v-if="item.selected" class="checkbox-icon">✔</view>
          </view>
          <!-- 商品图片 -->
          <image :src="item.image" mode="aspectFill" class="product-image"></image>
          <!-- 商品信息 -->
          <view class="product-info">
            <text class="product-title">{{ item.title }}</text>
            <text class="product-price">￥{{ item.price }}</text>
            <!-- 数量操作 -->
            <view class="quantity-control">
              <text class="quantity-btn" @click="changeQuantity(shopIndex, itemIndex, -1)">-</text>
              <text class="quantity">{{ item.quantity }}</text>
              <text class="quantity-btn" @click="changeQuantity(shopIndex, itemIndex, 1)">+</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部结算栏 -->
    <view class="footer">
      <!-- 全选 -->
      <view class="select-all" @click="toggleSelectAll">
        <view class="checkbox">
        	<view v-if="isAllSelected" class="checkbox-icon">✔</view>
        </view>
        <view class="checkbox-txt">全选</view>
      </view>
      <!-- 总价 -->
      <view class="total-price">
        总价：￥{{ totalPrice.toFixed(2) }}
      </view>
      <!-- 结算按钮 -->
      <view class="checkout-btn" @click="checkout">结算</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 购物车数据（按商家分组）
      cartList: [
        {
          name: '商家1',
          selected: false,
          items: [
            {
              image: 'https://img01-gms.17zwd.com/imgextra01/61336614/i2/515677600375505480.jpg',
              title: '商品1',
              price: 99.99,
              quantity: 1,
              selected: false
            },
            {
              image: 'https://img01-gms.17zwd.com/imgextra01/61336614/i2/515677600375505480.jpg',
              title: '商品2',
              price: 89.99,
              quantity: 1,
              selected: false
            }
          ]
        },
        {
          name: '商家2',
          selected: false,
          items: [
            {
              image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg',
              title: '商品3',
              price: 79.99,
              quantity: 1,
              selected: false
            },
            {
              image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg',
              title: '商品4',
              price: 69.99,
              quantity: 1,
              selected: false
            }
          ]
        }
      ],
      // 是否全选
      isAllSelected: false
    };
  },
  computed: {
    // 计算总价
    totalPrice() {
      return this.cartList
        .reduce((total, shop) => {
          return (
            total +
            shop.items
              .filter((item) => item.selected)
              .reduce((shopTotal, item) => shopTotal + item.price * item.quantity, 0)
          );
        }, 0);
    }
  },
  methods: {
    // 切换商家选中状态
    toggleShopSelect(shopIndex) {
      const shop = this.cartList[shopIndex];
      shop.selected = !shop.selected;
      shop.items.forEach((item) => (item.selected = shop.selected));
      this.checkAllSelected();
    },

    // 切换商品选中状态
    toggleItemSelect(shopIndex, itemIndex) {
      const item = this.cartList[shopIndex].items[itemIndex];
      item.selected = !item.selected;
      // 检查商家是否全选
      const shop = this.cartList[shopIndex];
      shop.selected = shop.items.every((item) => item.selected);
      this.checkAllSelected();
    },

    // 切换全选
    toggleSelectAll() {
      this.isAllSelected = !this.isAllSelected;
      this.cartList.forEach((shop) => {
        shop.selected = this.isAllSelected;
        shop.items.forEach((item) => (item.selected = this.isAllSelected));
      });
    },

    // 检查是否全选
    checkAllSelected() {
      this.isAllSelected = this.cartList.every((shop) => shop.selected);
    },

    // 修改商品数量
    changeQuantity(shopIndex, itemIndex, delta) {
      const newQuantity = this.cartList[shopIndex].items[itemIndex].quantity + delta;
      if (newQuantity > 0) {
        this.cartList[shopIndex].items[itemIndex].quantity = newQuantity;
      }
    },

    // 结算
    checkout() {
      const selectedItems = this.cartList
        .flatMap((shop) => shop.items.filter((item) => item.selected));
      if (selectedItems.length === 0) {
        uni.showToast({
          title: '请选择商品',
          icon: 'none'
        });
        return;
      }
      uni.showToast({
        title: `结算成功，总价：￥${this.totalPrice.toFixed(2)}`,
        icon: 'none'
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
}

/* 购物车列表 */
.cart-list {
  margin-bottom: 250rpx;
}

/* 商家分组 */
.shop-group {
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 商家信息 */
.shop-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 2rpx solid #f8f8f8;
}

/* 商家名称 */
.shop-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-left: 20rpx;
}

/* 单个购物车商品项 */
.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

/* 选择框 */
.checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #ccc;
  border-radius: 50%;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 选中状态的复选框 */
.checkbox-icon {
  font-size: 24rpx;
  color: #fff;
  background-color: #ff5000;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 商品图片 */
.product-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
}

/* 商品信息 */
.product-info {
  flex: 1;
  margin-left: 20rpx;
}

/* 商品标题 */
.product-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

/* 商品价格 */
.product-price {
  display: block;
  font-size: 28rpx;
  color: #ff5000;
  margin-bottom: 10rpx;
}

/* 数量操作 */
.quantity-control {
  display: flex;
  align-items: center;
}

.quantity-btn {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #333;
}

.quantity {
  margin: 0 20rpx;
  font-size: 28rpx;
}

/* 底部结算栏 */
.footer {
  position: fixed;
  bottom: 100rpx;
  left: 0;
  right: 0;
  height: 150rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
  box-shadow: 0 -4rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 全选 */
.select-all {
  width: 150rpx;
  height: 40rpx;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .checkbox-txt{
	  white-space: nowrap;
  }
}

/* 总价 */
.total-price {
	flex:1;
  font-size: 32rpx;
  color: #ff5000;
  text-align: right;
}

/* 结算按钮 */
.checkout-btn {
  background-color: #ff5000;
  color: #fff;
  font-size: 30rpx;
  border-radius: 6rpx;
  width:200rpx;
  height:80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10rpx;
  
}
</style>